<template>
  <div>
    <el-row style="margin-bottom:0.5rem">
      <PartyGroupSelector v-model="group" :code.sync="company" />
    </el-row>
    <el-row :gutter="20">
      <el-col :xl="6" :lg="5" :md="24">
        <ConferenceList
          ref="conferenceList"
          :type="config.type"
          :conference-id="conferenceId"
          :company="company"
          :group="group"
          @requireDetail="handleRequireDetail"
        />
      </el-col>
      <el-col :xl="18" :lg="19" :md="24">
        <el-card class="ease-move">
          <template v-if="!conferenceId" #header>
            <h2>会议详情</h2>
          </template>
          <el-button
            v-show="conferenceId"
            icon="el-icon-s-fold"
            type="text"
            @click="conferenceId=null"
          >关闭</el-button>
          <Detail
            v-if="conferenceId"
            v-model="conferenceId"
            @conferenceChanged="conferenceChanged"
          />
          <NoData v-else />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'CommonConference',
  components: {
    Detail: () => import('../details'),
    ConferenceList: () => import('../ConferenceList'),
    NoData: () => import('@/views/Loading/NoData'),
    PartyGroupSelector: () =>
      import('@/components/Party/PartyGroup/PartyGroupSelector')
  },
  props: {
    config: { type: Object, default: null }
  },
  data: () => ({
    conferenceId: null,
    company: null,
    group: null
  }),
  mounted() {
    this.$store.dispatch('party/initConferenceExtendFieldsDictionary', {
      reload: false
    })
  },
  methods: {
    handleRequireDetail(id) {
      this.conferenceId = id
    },
    conferenceChanged() {
      this.$refs.conferenceList.reload()
    }
  }
}
</script>
